<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { ref } from "vue";
import { randomInt } from "@/framework/util/numbers.ts";

import { copyText } from "@/util/clipboard.ts";

const port = ref<string>("");

const genPort = () => {
  port.value = randomInt(1024, 65534).toString();
};

genPort();
</script>

<template>
  <tool-view title="随机端口生成" description="生成（1024 ~ 65534）之间的随机端口号。">
    <div class="full-view flex-center">
      <div class="w-500 pv-30">
        <div class="text-center font-60 select-text mb-30">{{ port }}</div>

        <div class="flex-center">
          <a-space>
            <a-button @click="copyText(port)">复制</a-button>
            <a-button @click="genPort">刷新</a-button>
          </a-space>
        </div>
      </div>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
